<template>
    <div class="order-detail-dialog">
        <bi-tab>
            <bi-tab-item label="订单信息">
                <div class="order-detail-content">
                    <div class="order-detail-info">
                        <div >
                            <h5>{{item.order_id}}</h5>
                            <ul class="list-group order-info">
                                <li class="list-group-item order-info-row">
                                    <div class="title">状态：</div>
                                    <div class="content">{{$pageData.statusOption[item.status]??item.status}}</div>
                                </li>
                                <li class="list-group-item">
                                    <div class="title">用户：</div>
                                    <div class="content">{{item.member_mobile}}</div>
                                </li>
                                <li class="list-group-item">
                                    <div class="title">下单时间：</div>
                                    <div class="content">{{item.createdat}}</div>
                                </li>
                                <li class="list-group-item">
                                    <div class="title">支付方式：</div>
                                    <div class="content">{{item.payment_way}}</div>
                                </li>
                                <li class="list-group-item">
                                    <div class="title">商品数量：</div>
                                    <div class="content">{{item.goods_num}}</div>
                                </li>
                                <li class="list-group-item">
                                    <div class="title">付款金额：</div>
                                    <div class="content">{{item.money_pay}}</div>
                                </li>
                                <li class="list-group-item">
                                    <div class="title">备注：</div>
                                    <div class="content">{{item.remark}}</div>
                                </li>
                            </ul>
                        </div>
                        <div >
                            <h5>收货信息</h5>
                            <ul class="list-group order-info">
                                <li class="list-group-item">
                                    <div class="title">收货人：</div>
                                    <div class="content">{{item.address_contacts}}</div>
                                </li>
                                <li class="list-group-item">
                                    <div class="title">联系电话：</div>
                                    <div class="content">{{item.address_phone}}</div>
                                </li>
                                <li class="list-group-item">
                                    <div class="title">收货地址：</div>
                                    <div class="content">{{item.address_area}} {{item.address_detail}}</div>
                                </li>
                            </ul>
                        </div>
                   
                   
                        <div >
                            <h5>订单金额</h5>
                            <ul class="list-group order-info">
                                <li class="list-group-item order-info-row" v-for="(detail,name) in money_detail">
                                    <div class="title">{{MoneyDetailTitle(name)}}</div>
                                    <div class="content">{{detail.money}}</div>
                                </li>
                            </ul>
                        </div>
                        
                    </div>
                </div>
                
            </bi-tab-item>
            <bi-tab-item label="商品信息">
                
                    <bi-table :data="goods" :loading="loading" height="400">
                        <bi-table-column label="商品图片" width="100" v-slot="{row,index}">
                            <img :src="$uploadUrl(row.picture)" width="50" height="50" :alt="row.title" :title="row.title" />
                        </bi-table-column>
                        <bi-table-column label="商品名称" name="title" v-slot="{row}">
                            <div class="">{{row.title}}
                            <div class="sku_name">{{row.sku_name}}</div>
                            </div>
                        </bi-table-column>
                        <bi-table-column label="商品价格" name="price" width="100"></bi-table-column>
                        <bi-table-column label="商品数量" name="num" width="100"></bi-table-column>
                        <bi-table-column label="商品总价" name="money_total" width="100"></bi-table-column>
                        <bi-table-column label="付款金额" name="money_pay" width="100"></bi-table-column>
                    </bi-table>
            </bi-tab-item>
            <bi-tab-item label="优惠券">
                <div class="order-detail-content">
                    <bi-table :data="coupon_list" :loading="loading" height="400">
                        <bi-table-column label="名称" name="coupon_desc" >
                        </bi-table-column>
                        <bi-table-column label="价格" name="coupon_price" width="100"></bi-table-column>
                        <bi-table-column label="商品数量" name="num" width="100"></bi-table-column>
                        <bi-table-column label="商品总价" name="money_total" width="100"></bi-table-column>
                        <bi-table-column label="付款金额" name="money_pay" width="100"></bi-table-column>
                    </bi-table>
                </div>
            </bi-tab-item>
            <bi-tab-item label="物流信息">
                <div class="order-detail-content">
                    未找到物流接口
                </div>
            </bi-tab-item>
        </bi-tab>
        <div class="button-list">
            <bi-button>修改订单</bi-button>
            <bi-button>结束订单</bi-button>
        </div>
    </div>
</template>


<script>
export default{
    dialog:{
        width:800,
        title:'订单详情',
        okButton:false,
        loading:true,
    },
    data(){
        return {
            loading:false,
            goods:[],
            money_detail:[],
            coupon_list:[],
            item:{
            },
        }
    },
    props:{
        id:{
            type:String
        }
    },
    methods:{
        MoneyDetailTitle(name){
            switch(name){
                case 'total':
                    return '订单总额'
                case 'freight':
                    return '运费'
                case 'coupon':
                    return '优惠券'
                case 'freightCoupon':
                    return '运费券'
            }   
        }
    },
    mounted(){
        this.loading = true;
        this.$ajax({
            url:this.$url({'app':'shop','controller':'admin.order','action':'detail'}),
            data:{
                id:this.id
            },
            success:(data)=>{
                this.item = data;
                this.money_detail =  data.money_detail;
                this.goods = data.goods;
                console.log(data.goods);
                this.loading = false;
                this.dialog.loading  = false;
            }
        })
    }
}
</script>


<style>
.order-detail-content{
    height: 400px;
    overflow-y: auto;
    
}

.order-detail-info{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-right: 10px;
}

.order-info li{
    display: flex;
}

.order-info li .title{
    width: 100px;
}
.button-list{
    padding-top: 20px;
}

.sku_name{
    color: #999;
}
</style>